<!-- 套系简介 -->
<template>
    <div class="com-container">
        <xszk-header 
            :isHeadSearch="true"
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <div class="com-main">
            <div v-if="getProData!=null">
                <div class="top-label">
                    <div class="oh">
                        <div class="top-img fl">
                            <img :src="getProData.img_src?getProData.img_src:initImg" class="img100">
                        </div>
                        <div class="top-desc fl">
                            <h3 class="fs18" style="color:#112C71">{{getProData.name|text}}</h3>
                            <div class="mt15 c666">
                                <span>更新于：{{getProData.update_time.split(" ")[0]|text}}</span>
                                <span class="ml40">作者：{{getProData.author|text}}</span>
                            </div>
                            <p class="mt15 fs16">{{getProData.abs|text}}</p>
                        </div>
                    </div>
                    <div class="flex ali-c">
                        <img src="@/static/images/sort_icon.png" class="sort-img">
                        <el-select 
                            v-model="serVal"
                            class="ser-select no-popper-arrow"
                            placeholder="切换套系"
                            :popper-append-to-body="false"
                            @change="serChange"
                            value-key="_id"
                        >
                            <el-option
                                v-for="item in getProData.components.columns_info"
                                :key="item._id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="seach-label">
                    <div class="seach-warp fl">
                        <el-select 
                            v-model="seachVal"
                            class="seacher-select no-popper-arrow fl"
                            :popper-append-to-body="false"
                            @change="seachChange"
                            value-key="id"
                        >
                            <el-option
                                v-for="item in seachList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                        <div class="line-gap fl"></div>
                        <input type="text" v-model="seachKey" placeholder="搜索该套系内容" class="seach-input fl">
                        <img src="@/static/images/seach_icon.png" class="seach-icon cp fr" @click="quickSearch">
                    </div>
                    <button class="seach-btn cfff bgtheme fl" @click="quickSearch">搜索</button>
                    <button class="seach-btn bgfff fl quick-sea">在结果中搜素</button>
                    <div class="clear"></div>
                    <div class="mt30 ml35 flex ali-c">
                        <el-radio-group v-model="radio" class="seach-radio">
                            <el-radio :label="1">精确查询</el-radio>
                            <el-radio :label="2">模糊查询</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="flex jus-b">
                    <div class="list-wrapfl">
                        <xszk-list-tree
                            v-for="(item,index) in getDataTree"
                            :key="index"
                            :treeData="item"
                            @cateTreeChange="cateTreeChange"
                            @noChildChange="noChildChange"
                        ></xszk-list-tree>
                    </div>
                    <div class="list-wrapfr">
                        <div class="cont-top flex ali-c">
                            <span class="fs16">排序：</span>
                            <el-select 
                                v-model="sortVal"
                                placeholder="请选择"
                                :popper-append-to-body="false"
                                class="time-select no-popper-arrow ml7"
                                @change="changeSort"
                            >
                                <el-option
                                    v-for="item in sortList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                            <img 
                                class="top-sort"
                                :class="{'sortInit':!isSortInit}"
                                @click="onSort"
                                src="@/static/images/sort_down.png"
                            >
                        </div>
                        <ul class="list-cont" v-if="getDataList.length>0">
                            <li
                               v-for="(item,index) in getDataList" 
                               :key="index"
                            >
                                <div class="list-img" @click="toSerList(item)">
                                    <img :src="item.img_src?item.img_src:initImglist" class="img100">
                                </div>
                                <div class="list-desc">
                                    <h3 class="list-tit" @click="toSerList(item)">{{item.name}}</h3>
                                    <div class="fs14 c666 flex ali-c" style="margin-top:16px">
                                        <div class="fs0">更新于：{{item.update_time.split(" ")[0]|text}}</div>
                                        <div class="ml40 oneline">作者：{{getProData.author|text}}</div>
                                    </div>
                                    <div class="fs16" style="margin-top:16px">共<span class="ctheme">128</span>篇内容</div>
                                    <button class="com-full-btn" style="margin-top:28px" @click="toSerList(item)">查看详情</button>
                                </div>
                            </li>
                        </ul>
                        <div v-else class="no-search-main">
                            <div v-if="isSearchNull" class="tc">
                                <img src="@/static/images/search_no.png" class="no-img" >
                                <p class="mt15 fs16 c666">无搜索结果</p>
                            </div>
                        </div>
                        <el-pagination
                            v-if="currentPage.total > currentPage.size&&currentPage.total != 0" 
                            class="mt25 mr30 tr"
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :pager-count="5"
                            :page-sizes="[10, 20, 30]"
                            :current-page="currentPage.page"
                            :page-size="currentPage.size"
                            :total="currentPage.total"
                            layout="sizes, prev, pager, next"
                        >
                        </el-pagination>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {baseUrl} from '../../http/baseUrl';
export default {
    name: "serTopics",
    components:{
        xszkHeader: (resolve) =>require([ "@/components/xszkHeader",], resolve),
        xszkListTree: (resolve) =>require(["@/components/xszkListTree",], resolve),
        xszkMainView: (resolve) =>require(["@/components/xszkMainView",], resolve),
    },
    computed: {
        token(){
            return this.$store.getters.token;
        },
    },
    data() {
        return {
            isLoginShow:false,
            initImg: require('@/static/images/classic_img.png'),
            initImglist: require('@/static/images/demo_img.jpg'),
            isSearchNull:false,
            isHighSearch:false,
            serVal:{
                _id:'',
                name:'',
            },
            seachKey:'',
            highData:{
                scopeVal:'and',
                scopeList:[
                    {type:'all',value:'',vag:'0'},
                ],
                classId:'all',
                radioVal:'all',
                author:'',
                local:'',
                time:'',
                source:''
            },
            getCategorysId:'',
            radio:1,
            seachVal:'0',
            seachList:[
                {label:'标题',value:'0'},
                {label:'作者',value:'1'},
                {label:'全文',value:'2'},
            ],
            isSortInit:true,
            sortVal: '0',
            sortList: [
                {value: '0',label: '发布时间'},
                {value: '1',label: '热门'}
            ],
            getDataTree:[],
            getDataList:[],
            currentPage: {
                page: 1,
                size: 10,
                total: 1,
            },
            getProductId:'',
            getSpliceField:'',
            getProData: null,
            //默认降序
            sortStr:"",
            
        };

    },
    methods: {
        toSerList(item){
            let descData = {id:item._id,name:item.name,fromName:this.getProData.name,productId:this.getProductId};
            this.$router.push({path:'/serDesc',query: { descData:JSON.stringify(descData)}});
        },
        quickSearch(){
            if(!this.seachKey){
                this.toast.info("请输入搜索条件");
                return false;
            }
            this.isHighSearch = true;
            this.highData.scopeList = [{type:this.highData.scopeList[0].type,value:this.seachKey,vag:this.highData.scopeList[0].vag}];
            this.currentPage.page = 1;
            this.getHighSearch();
            this.seachKey = "";
        },
        serChange(value){
            this.serVal._id = value._id;
            this.serVal.name = value.name;
            this.getSerVolume();
        },
        seachChange(val){
           
        },
        changeSort(val){
            this.isSortInit = true;
            switch (val) {
                case '0':
                    this.sortStr = `&order={"发布时间":"desc"}`;
                    break;
                case '1':
                    this.sortStr = `&order={"hot":"desc"}`;
                    break;
                default:
                    break;
            }
            // this.initDataList();
        },
        onSort(){
            this.isSortInit=!this.isSortInit;
            let stsSort = "desc";
            stsSort = this.isSortInit?'desc':'asc';
            switch (this.sortVal) {
                case '0':
                    this.sortStr = `&order={"发布时间":"${stsSort}"}`;
                    break;
                case '1':
                    this.sortStr = `&order={"hot":"${stsSort}"}`;
                    break;
                default:
                    break;
            }
            // this.initDataList();
        },
        handleCurrentChange(val) {
            this.currentPage.page = val;
            this.getSerList();
        },
        handleSizeChange(val) {
            this.currentPage.size = val;
            this.getSerList();
        },
        initDataList(){
            this.currentPage.page = 1;
            this.getSerList();
        },
        cateTreeChange(item){
            this.getDataList = [];
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = (item.pid == treeItem._id)?true:false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen = (item.pid == treeChildItem._id)?true:false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            });
            item.isOpen = true;
            this.getDataTree = this.stringutils.deepClone(this.getDataTree);
            this.getSpliceField = `&filter[归属套系卷册][0]=${item.code}`;
            // this.initDataList();
            this.getDataList.push(item);
        },
        noChildChange(items){
            this.getDataList = [];
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen=false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            })
            items.isOpen = true;
            this.getSpliceField = `&filter[归属套系卷册][0]=${items.code}`;
            this.getDataList.push(items);
            // this.initDataList();
        },
        loopData(resData,rootArr){
            rootArr.forEach(rootItem => {
                rootItem.name = '时间';
                resData.forEach(resItem => {
                    if(rootItem._id == resItem.rid&&resItem.type=='group'){
                        rootItem.childList.push(resItem);
                    }
                });
                if(rootItem.childList.length>0){
                    rootItem.childList.forEach(childItem => {
                        resData.forEach(resItem => {
                            if(childItem._id == resItem.pid&&resItem.type=='cate'){
                                if(resItem.children.length>0){
                                    childItem.childList = resItem.children;
                                    childItem.number =  `共${childItem.childList.length}集`;
                                }else{
                                    childItem.number = 0;
                                    childItem.childList.push(resItem);
                                }
                            }
                        });
                    });
                }
                rootItem.childList.reverse();
            });
            return rootArr;
        },
        getSerDesc(){
            let that = this;
            let data = {
                id: this.getProductId,
            };
            this.request.getSerDesc(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    that.getProData = resData;
                    // that.serVal._id = resData.components.columns_info[0]._id;
                    // that.serVal.name = resData.components.columns_info[0].name;
                    that.getSerVolume();
                    // console.log(resData);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getSerVolume(){
            let that = this;
            let data = {
                product_id: this.getProductId,
                class_id: this.serVal._id
            };
            this.request.getSerVolume(data, (res)=> {
                if (res.code == "0") {
                    that.getDataTree = [];
                    let resData = res.data;
                    let rootArr = [];
                    if(resData.length>0){
                        for (let i in resData) {
                            resData[i].isOpen = false;
                            resData[i].childList = [];
                            resData[i].number = 0;
                            if(resData[i].pid =='root'&&resData[i].type !='time'){
                                rootArr.push(resData[i])
                            }
                        }
                        resData = resData.filter(item=>item.pid !='root');
                        that.getDataTree = that.loopData(resData,rootArr);
                        if(that.getDataTree.length!=0){
                            that.getDataTree[0].childList[0].isOpen = true;
                            if(that.getDataTree[0].childList[0].childList.length!=0){
                                that.getDataTree[0].childList[0].childList[0].isOpen = true;
                                that.getSpliceField  = `&filter[归属套系卷册][0]=${that.getDataTree[0].childList[0].childList[0].code}`;
                            }else{
                                that.getSpliceField  = `&filter[归属套系卷册][0]=${that.getDataTree[0].childList[0].code}`;
                            }
                            that.getDataList = [that.getDataTree[0].childList[0].childList[0]];
                            console.log(that.getDataList);
                            // that.initDataList();
                        }
                    }
                    console.log(that.getDataTree);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        //右侧数据
        // getSerList(){
        //     that.getDataList = [];
        // },
        //高级搜索
        getHighSearch(){
            let scopeStr = "";
            this.highData = this.stringutils.deepClone(this.highData);
            if(this.highData.scopeList.length>1){
                for(let i=1;i<this.highData.scopeList.length;i++){
                    scopeStr+= `&appendKeys[${i-1}][type]=${this.highData.scopeList[i].type}&appendKeys[${i-1}][value]=${this.highData.scopeList[i].value}`
                }
            }
            let data = `key[type]=${this.highData.scopeList[0].type}&key[value]=${this.highData.scopeList[0].value}${scopeStr}&keywordcheck=${this.sortStr}
                &keyword[type]=unit&keyword[value]=${this.highData.local}&keyword[type]=author&keyword[value]=${this.highData.author}&filter[出处][0]=刑事审判参考
                &appendKeysType=${this.highData.scopeVal}&category[cateId]=&category[childId]=&pid=${this.getProductId}&cid=&category_id=
                &time[time_start]=${this.highData.time[0]?this.highData.time[0]:''}&time[time_end]=${this.highData.time[1]?this.highData.time[1]:''}&sources${this.highData.source}&price=${this.highData.radioVal}
            `;
            let that = this;
            this.$http({
                method:'POST',
                headers:{
                    PageStart:this.currentPage.page-1,
                    PageOffset:this.currentPage.size,
                    ApiToken:this.token,
                },
                data: data,
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_articles/search_advanced`,
            }).then(res=>{
                if (res.data.code == "0") {
                    that.isHighSearch = true;
                    that.isSeaPopShow = false;
                    that.getDataList = [];
                    let resData = res.data.data;
                    if(resData){
                        if(resData.length>0){
                            that.currentPage.total = res.data.page.total;
                            resData.forEach(item => {
                                item.isCheack = false;
                            });
                            that.getDataList = resData;
                        }else{
                            that.isSearchNull = true;
                        }
                    }else{
                        that.isSearchNull = true;
                    }
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
     
        
    },
   
    created() {
        if(this.$route.query.productId){
            this.getProductId = this.$route.query.productId;
            this.getSerDesc();
        }
    },
    
    

};
</script>

<style lang="stylus" scoped>
/deep/.ser-select.el-select
    width 100px
    height 30px
/deep/.ser-select .el-input__inner
    font-size 16px
    border none
    padding 0 5px
    height 30px
    background none
    color #3266CC
    font-weight bolder
    &::-webkit-input-placeholder
        color #3266CC
        font-size 16px
/deep/.ser-select.el-select .el-input .el-select__caret
    display none
/deep/.ser-select .el-select-dropdown
    width 140px
/deep/.ser-select .el-select-dropdown
    left -40px !important
/deep/.ser-select .el-select-dropdown__item
    font-size 14px
    padding 0 10px
    text-align center
/deep/.ser-select .el-input__icon
    line-height 26px
/deep/.ser-select .el-select-dropdown__wrap
    max-height 320px
.top-label
    display flex
    justify-content space-between
    align-items center
    width 100%
    height 243px
    padding 0 32px
    margin-top 28px
    background #fff
    border-radius 4px
    .top-img
        flex-shrink 0
        width 160px
        height 165px
        overflow hidden
    .top-desc 
        width 640px
        height auto
        margin-left 50px
    .sort-img
        width 12px
        height 10px
        flex-shrink 0
        margin-right 10px
.seach-label
    width 100%
    margin 28px 0
    .seach-warp
        position relative
        width 806px
        height 66px
        line-height 66px
        background #FFFFFF
        box-shadow 0px 0px 5px 1px rgba(193, 210, 255, 0.5)
        border-radius 4px
        padding-right 30px
        border 1px solid #9EA6AF
        .line-gap
            width 2px
            height 100%
            background #ddd
        .seach-input
            display block
            width 78%
            height 66px
            flex-shrink 0
            font-size 18px
            padding-left 35px
        /deep/.seach-input::-webkit-input-placeholder 
            font-size 16px
        .seach-icon
            margin-top 17px
            width 30px
            height 30px
    .seach-btn
        margin-top 13px
        width 150px
        height 40px
        line-height 40px
        text-align center
        font-size 20px
        border 1px solid transparent 
        border-radius 4px
        margin-left 37px
        transition 0.2s
        cursor pointer
    .quick-sea
        width 164px
        margin-left 40px 
    .seach-btn:hover
        opacity 0.85
    .quick-sea:hover
        border-color #3266CC
        color #3266CC
    .radio-item
        cursor pointer
        font-size 14px
        margin-right 25px
    .radio-line
        flex-shrink 0
        width 1px
        height 20px
        background #979797
        margin-left 13px
        margin-right 30px
    /deep/.seach-radio .el-radio 
        margin-right 25px 
    /deep/.seach-radio .el-radio__label 
        font-size 14px
        color #333 
.list-wrapfl
    width 240px
    height auto
.list-wrapfr
    width 944px
    min-height 500px
    padding-bottom 25px
    background #FFFFFF
    border-radius 4px
    .cont-top
        width 100%
        height 50px
        padding 0 35px
        border-bottom 1px solid #ddd
        /deep/.time-select.el-select
            width 98px
            height 22px
        /deep/.time-select .el-input__inner
            font-size 14px
            border 1px solid #979797
            padding 0 10px
            height 22px
            color #3266CC
            border-radius 0
        /deep/.time-select .el-input__suffix
            right 2px
        /deep/.time-select .el-select__caret 
            background url("../../static/images/down.png") no-repeat center
            background-size 9px 10px
        /deep/.time-select .el-input__suffix .el-icon-arrow-up:before 
            content: ""
        /deep/.time-select .el-select-dropdown
            width 98px
        /deep/.time-select .el-select-dropdown__item
            text-align center
            font-size 14px
            padding 0 10px
        /deep/.time-select .el-input__icon
            line-height 22px
        /deep/.time-select .el-select-dropdown__item:hover,/deep/.time-select .el-select-dropdown__item.selected
            color #3266CC
            font-weight normal
        .top-sort
            flex-shrink 0
            width 14px
            height 14px
            margin-left 15px
            cursor pointer
            &.sortInit
                transform rotate(180deg)
    .list-cont li
        display flex
        align-items center
        width 100%
        padding 24px 36px
        border-bottom 1px solid #ddd
        .list-tit
            cursor pointer
            font-size 18px
            color #112C71
            transition all 0.2s
            &:hover
                color #E8C47B 
        .list-img
            flex-shrink 0
            width 120px
            height 165px
            margin-left 40px
            cursor pointer
            overflow hidden
        .list-desc
            width 640px
            overflow hidden
            margin-left 73px
    .no-search-main
        width 100%
        height 650px
        display flex
        align-items center
        flex-direction column
        .no-img
            margin-top 112px
            width 300px
            height auto
    
</style>